<template>
  <div class="order-record-mgr" v-loading.fullscreen.lock="loading">
    <page-main :pagination="pagination" @search-data="searchData" @page-change="pageChange">
      <template slot="search">
        <search-form :search="search" :user="user" :dropdown-option="dropdownOption"></search-form>
      </template>
      <template slot="statistic">
        <div class="order-record-mgr-stat">
          <template v-if="statData!==null">
            <span>交易笔数:{{statData.turnoverCount}}</span>
            <span>退款总额:{{statData.refundPrice}}</span>
            <span>营业额:{{statData.turnoverPrice}}</span>
          </template>
        </div>
      </template>
      <template slot="table">
        <el-table fit stripe border highlight-current-row :data="orderList" height="100%">
          <el-table-column :resizable="false" type="expand" width="38px" fixed="left">
            <template slot-scope="scope">
              <goods-item :order="scope.row" :key="scope.row.orderId"></goods-item>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="orderId" label="订单号" width="180px" align="center"></el-table-column>

          <template v-if="user.branchId===1">
            <el-table-column prop="branchName" label="总店" min-width="130px" header-align="center"></el-table-column>
            <el-table-column prop="partnerName" label="分店" min-width="130px" header-align="center"></el-table-column>
          </template>

          <el-table-column prop="buyerName" label="购买者" min-width="130px" header-align="center"></el-table-column>
          <el-table-column prop="buyerPhone" label="联系方式" min-width="130px" header-align="center"></el-table-column>
          <el-table-column prop="buyerAddress" label="购买者地址" min-width="260px" header-align="center"></el-table-column>

          <el-table-column :resizable="false" label="下单时间" width="170px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.getDatetimeValue('createTime','YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>

          <el-table-column :resizable="false" label="状态" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`orderMgr.status.${scope.row.status}`)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </page-main>
  </div>
</template>

<script>
  import OrderMgrApi from 'services/orderMgrApi';
  import loginUser from 'mixins/loginUser';

  import PageMain from 'commonComponents/pageMain';
  import SearchForm from './searchForm';
  import GoodsItem from './goodsItem';

  import Pagination from 'models/pagination';
  import OrderRecordSearch from 'models/financeMgr/orderRecordSearch';

  export default {
    mixins: [loginUser],

    data() {
      return {
        loading: false,
        search: new OrderRecordSearch(),
        pagination: new Pagination(),
        orderList: [],
        statData: null,
        dropdownOption: {}
      };
    },

    created() {
      this.setOrderList(true);
    },

    methods: {
      setOrderList(isSearch = false) {
        let search = this.search;
        if (!isSearch) {
          search.resetOldData();
        }

        let code = search.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`orderMgr.record.error.${code}`);
          this.$message(msg);
          return;
        }

        let pagination = this.pagination;
        this.loading = true;
        OrderMgrApi.getOrderData(search, pagination).then(orderList => {
          if (isSearch) {
            search.setOldData();
          }

          this.orderList = orderList;
          this.calStatData();
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      calStatData() {
        // 交易笔数包括 支付完成+退款+完成 + 退款中
        // 退款的就是 退款的
        // 营业额 支付完成+完成 + 退款中
        let orderList = this.orderList;
        let turnoverCount = 0,
          refundPrice = 0,
          turnoverPrice = 0;
        for (let i = 0; i < orderList.length; i++) {
          const order = orderList[i];
          let status = order.status;
          if ([1, 2, 3, 4].indexOf(status) !== -1) {
            turnoverCount++;
          }

          let stat = order.getStatPrice();
          refundPrice += stat.refundPrice;
          turnoverPrice += stat.turnoverPrice;
        }

        this.statData = {
          turnoverCount,
          refundPrice: _.round(refundPrice, 2),
          turnoverPrice: _.round(turnoverPrice, 2),
        };
      },

      searchData() {
        this.pagination.currentPage = 1;
        this.setOrderList(true);
      },

      pageChange() {
        this.setOrderList();
      }
    },

    components: {
      PageMain,
      SearchForm,
      GoodsItem
    }
  };

</script>

<style lang="scss" scoped>
  .order-record-mgr {
    height: 100%;

    .order-record-mgr-stat {
      height: 24px;
      line-height: 24px;
      margin-bottom: 10px;

      >span {
        margin-right: 12px;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

</style>
